<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明细 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        /* 二级分类样式 */
        .subcategory-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }

        .calendar-days {
            display: contents;
        }
        
        .subcategory-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background: #f8f9fa;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }
        
        .subcategory-item.active .subcategory-icon {
            background: #667eea;
            color: white;
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        }
        
        .subcategory-name {
            font-size: 12px;
            color: #718096;
        }
        
        .subcategory-item.active .subcategory-name {
            color: #667eea;
            font-weight: 600;
        }
        
        /* 筛选器中的分类样式调整 */
        .filter-category-selector .category-item {
            padding: 8px;
        }
        
        .filter-category-selector .category-icon {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
        
        .filter-subcategory-selector {
            background: #f0f5ff;
            border-radius: 12px;
            padding: 15px;
            margin-top: 10px;
        }
        
        /* 月份选择器样式 */
        .month-selector {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
        }
        
        .month-selector:hover {
            color: #667eea;
        }
        
        .month-arrow {
            font-size: 12px;
            transition: transform 0.3s ease;
        }
        
        .month-selector.active .month-arrow {
            transform: rotate(180deg);
        }
        
        .month-picker {
            position: absolute;
            top: 100%;
            left: 20px;
            right: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            z-index: 9999;
            padding: 20px;
            margin-top: 10px;
        }
        
        .month-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .year-btn {
            background: none;
            border: none;
            font-size: 20px;
            color: #667eea;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .year-btn:hover {
            background: #f0f5ff;
        }
        
        .year-display {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
        }
        
        .month-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .month-item {
            padding: 12px;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            color: #4a5568;
        }
        
        .month-item:hover {
            background: #f0f5ff;
            color: #667eea;
        }
        
        .month-item.active {
            background: #667eea;
            color: white;
        }
        
        /* 紧凑交易项样式 */
        .transaction-item {
            padding: 8px 15px !important;
            margin-bottom: 0 !important;
            min-height: auto !important;
            display: flex !important;
            align-items: center !important;
            background: none !important;
            border: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            border-bottom: 1px solid #f0f0f0 !important;
        }
        
        .transaction-left {
            display: flex !important;
            align-items: center !important;
            flex: 1 !important;
        }
        
        .transaction-info {
            margin-left: 8px !important;
            flex: 1 !important;
        }
        
        .transaction-info h4 {
            font-size: 13px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .transaction-info h4:hover {
            background-color: #f8f9fa;
        }
        
        .transaction-icon {
            width: 28px !important;
            height: 28px !important;
            font-size: 14px !important;
            flex-shrink: 0 !important;
        }
        
        .transaction-amount {
            font-size: 14px !important;
            font-weight: 600 !important;
            margin-right: 8px !important;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .transaction-amount:hover {
            background-color: #f8f9fa;
        }
        
        /* 选项按钮 */
        .transaction-options {
            width: 24px !important;
            height: 24px !important;
            border-radius: 50% !important;
            background: #f8f9fa !important;
            border: none !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 12px !important;
            color: #666 !important;
            flex-shrink: 0 !important;
        }
        
        .transaction-options:hover {
            background: #e9ecef !important;
        }
        
        /* 精简日期头部为一行 */
        .detail-date-header {
            padding: 8px 15px !important;
            margin: 0 !important;
            font-size: 13px !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            background: #f8f9fa !important;
            border-radius: 0 !important;
            border-bottom: 2px solid #e9ecef !important;
        }
        
        .detail-date-header .date-info {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
        }
        
        .detail-date-header .weekday {
            font-size: 11px !important;
            color: #666 !important;
        }
        
        .detail-date-summary {
            font-size: 11px !important;
            display: flex !important;
            gap: 8px !important;
        }
        
        .detail-date-summary span:first-child {
            color: #dc3545 !important; /* 支出红色 */
        }
        
        .detail-date-summary span:last-child {
            color: #28a745 !important; /* 收入绿色 */
        }
        
        /* 日期分组间距 */
        .date-group {
            margin-bottom: 12px !important;
        }
        
        .date-group:last-child {
            margin-bottom: 0 !important;
        }
        
        .detail-list {
            padding-bottom: 60px !important;
        }
        
        /* 用户头像样式（家庭账本） */
        .item-user-avatar {
            width: 28px !important;
            height: 28px !important;
            border-radius: 50% !important;
            margin-right: 8px !important;
            flex-shrink: 0 !important;
            background: #007bff !important;
            color: white !important;
            font-size: 11px !important;
            display: flex !important;
            align-items: center!important;
            justify-content: center!important;
            text-transform: uppercase!important;
        }
        
        /* 日历按钮样式 */
        .calendar-btn {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .calendar-btn:hover {
            background: #5a67d8;
            transform: translateY(-50%) scale(1.05);
        }
        
        /* 日历视图样式 */
        .calendar-view {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .calendar-container {
            background: white;
            border-radius: 16px;
            padding: 20px;
            max-width: 400px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .calendar-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
        }
        
        .calendar-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #718096;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .calendar-close:hover {
            background: #f7fafc;
            color: #2d3748;
        }
        
        .calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .calendar-nav-btn {
            background: none;
            border: none;
            font-size: 18px;
            color: #667eea;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .calendar-nav-btn:hover {
            background: #f0f5ff;
        }
        
        .calendar-month-year {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-bottom: 10px;
        }
        
        .calendar-weekday {
            text-align: center;
            padding: 8px 4px;
            font-size: 12px;
            color: #718096;
            font-weight: 600;
        }
        
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
            padding: 4px 2px;
            font-size: 12px;
        }
        
        .calendar-day:hover {
            background: #f0f5ff;
        }
        
        .calendar-day.today {
            background: #667eea;
            color: white;
        }
        
        .calendar-day.has-data {
            background: #e6fffa;
            border: 1px solid #38b2ac;
        }
        
        .calendar-day.has-data:hover {
            background: #b2f5ea;
        }
        
        .calendar-day.other-month {
            color: #cbd5e0;
        }
        
        .calendar-day-number {
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .calendar-day-amount {
            font-size: 8px;
            line-height: 1;
        }
        
        .calendar-day-expense {
            color: #e53e3e;
        }
        
        .calendar-day-income {
            color: #38a169;
        }
        
        .calendar-legend {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
            font-size: 12px;
        }
        
        .calendar-legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .calendar-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        
        .legend-expense {
            background: #e53e3e;
        }
        
        .legend-income {
            background: #38a169;
        }
        
        .legend-today {
            background: #667eea;
        }
    </style>
</head>
<body>
    <div class="screen">
            
            <div class="app-container">
                <div class="header" style="position: relative;">
                    <div class="greeting">账单明细</div>
                    <div class="date month-selector" id="current-month">2024年5月 <span class="month-arrow">▼</span></div>
                    
                    <!-- 日历按钮 -->
                    <button class="calendar-btn" id="calendar-btn">
                        <span>📅</span>
                        <span>日历</span>
                    </button>
                    
                    <!-- 月份选择器 -->
                    <div class="month-picker" id="month-picker" style="display: none;">
                    <div class="month-picker-header">
                        <button class="year-btn" id="prev-year">‹</button>
                        <span class="year-display" id="year-display">2024</span>
                        <button class="year-btn" id="next-year">›</button>
                    </div>
                    <div class="month-grid">
                        <div class="month-item" data-month="1">1月</div>
                        <div class="month-item" data-month="2">2月</div>
                        <div class="month-item" data-month="3">3月</div>
                        <div class="month-item" data-month="4">4月</div>
                        <div class="month-item" data-month="5">5月</div>
                        <div class="month-item" data-month="6">6月</div>
                        <div class="month-item" data-month="7">7月</div>
                        <div class="month-item" data-month="8">8月</div>
                        <div class="month-item" data-month="9">9月</div>
                        <div class="month-item" data-month="10">10月</div>
                        <div class="month-item" data-month="11">11月</div>
                        <div class="month-item" data-month="12">12月</div>
                    </div>
                    </div>
                </div>
                
                <!-- 筛选器 -->
                <div style="padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; gap: 10px;">
                        <div class="filter-btn active" data-filter="all">全部</div>
                        <div class="filter-btn" data-filter="expense">支出</div>
                        <div class="filter-btn" data-filter="income">收入</div>
                    </div>
                    <div class="advanced-filter-btn" id="advanced-filter-btn" style="display: flex; align-items: center; gap: 5px; color: #667eea; font-size: 14px; cursor: pointer;">
                        <span>筛选</span>
                        <span style="font-size: 16px;">🔍</span>
                    </div>
                </div>
                
                <!-- 高级筛选面板 -->
                <div class="advanced-filter-panel" id="advanced-filter-panel" style="display: none; padding: 15px 20px; background: #f8f9fa; border-radius: 12px; margin: 0 20px 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                    <div style="margin-bottom: 15px;">
                        <div class="form-label">时间区间</div>
                        <div style="display: flex; gap: 10px; align-items: center;">
                            <input type="date" class="form-input" id="date-from" style="flex: 1;">
                            <span>至</span>
                            <input type="date" class="form-input" id="date-to" style="flex: 1;">
                        </div>
                    </div>
                    
                    <div style="margin-bottom: 15px;">
                        <div class="form-label">模糊搜索</div>
                        <input type="text" class="form-input" id="search-input" placeholder="搜索描述内容..." style="width: 100%;">
                    </div>
                    
                    <div style="margin-bottom: 15px;">
                        <div class="form-label">用户筛选</div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <div class="user-filter-btn active" data-user="all" style="padding: 6px 12px; border-radius: 16px; background: #667eea; color: white; font-size: 12px; cursor: pointer; border: 1px solid #667eea;">全部用户</div>
                            <div class="user-filter-btn" data-user="张" style="padding: 6px 12px; border-radius: 16px; background: #f8f9fa; color: #495057; font-size: 12px; cursor: pointer; border: 1px solid #dee2e6;">张</div>
                            <div class="user-filter-btn" data-user="李" style="padding: 6px 12px; border-radius: 16px; background: #f8f9fa; color: #495057; font-size: 12px; cursor: pointer; border: 1px solid #dee2e6;">李</div>
                            <div class="user-filter-btn" data-user="王" style="padding: 6px 12px; border-radius: 16px; background: #f8f9fa; color: #495057; font-size: 12px; cursor: pointer; border: 1px solid #dee2e6;">王</div>
                        </div>
                    </div>
                    
                    <div id="category-filter-container" style="margin-bottom: 15px; display: none;">
                        <div class="form-label">一级分类</div>
                        <div class="category-selector filter-category-selector" id="filter-categories" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px;">
                            <!-- 动态生成分类按钮 -->
                        </div>
                        
                        <div id="subcategory-filter-container" style="display: none;">
                            <div class="form-label">二级分类</div>
                            <div class="subcategory-selector filter-subcategory-selector" id="filter-subcategories" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: none; box-shadow: none;">
                                <!-- 动态生成二级分类按钮 -->
                            </div>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 10px;">
                        <button class="btn btn-primary" id="apply-filter-btn" style="flex: 1;">应用筛选</button>
                        <button class="btn btn-secondary" id="reset-filter-btn" style="flex: 1;">重置</button>
                    </div>
                </div>
                
                <!-- 明细列表 -->
                <div class="detail-list">
                    <!-- 今天 -->
                    <div class="date-group">
                        <div class="detail-date-header">
                            <div class="date-info">
                                <div>今天</div>
                                <div class="weekday">周三</div>
                            </div>
                            <div class="detail-date-summary">
                                <span>支出: ¥51</span>
                                <span>收入: ¥0</span>
                            </div>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">张</div>
                            <div class="transaction-icon food-icon">🍔</div>
                            <div class="transaction-info">
                                <h4>餐饮·午餐</h4>
                            </div>
                            <div class="transaction-amount expense-amount">-¥45</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">李</div>
                            <div class="transaction-icon transport-icon">🚇</div>
                            <div class="transaction-info">
                                <h4>交通·地铁出行</h4>
                            </div>
                            <div class="transaction-amount expense-amount">-¥6</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                    </div>
                    
                    <!-- 昨天 -->
                    <div class="date-group">
                        <div class="detail-date-header">
                            <div class="date-info">
                                <div>昨天</div>
                                <div class="weekday">周二</div>
                            </div>
                            <div class="detail-date-summary">
                                <span>支出: ¥0</span>
                                <span>收入: ¥8,500</span>
                            </div>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">王</div>
                            <div class="transaction-icon salary-icon">💰</div>
                            <div class="transaction-info">
                                <h4>工资·月薪收入</h4>
                            </div>
                            <div class="transaction-amount income-amount">+¥8,500</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                    </div>
                    
                    <!-- 5月26日 -->
                    <div class="date-group">
                        <div class="detail-date-header">
                            <div class="date-info">
                                <div>5月26日</div>
                                <div class="weekday">周一</div>
                            </div>
                            <div class="detail-date-summary">
                                <span>支出: ¥189</span>
                                <span>收入: ¥0</span>
                            </div>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">张</div>
                            <div class="transaction-icon" style="background: #e9ecef; color: #495057;">🛒</div>
                            <div class="transaction-info">
                                <h4>购物·日用品采购</h4>
                            </div>
                            <div class="transaction-amount expense-amount">-¥189</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                    </div>
                    
                    <!-- 5月25日 -->
                    <div class="date-group">
                        <div class="detail-date-header">
                            <div class="date-info">
                                <div>5月25日</div>
                                <div class="weekday">周日</div>
                            </div>
                            <div class="detail-date-summary">
                                <span>支出: ¥3,000</span>
                                <span>收入: ¥0</span>
                            </div>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">李</div>
                            <div class="transaction-icon" style="background: #e7f5ff; color: #1864ab;">🏠</div>
                            <div class="transaction-info">
                                <h4>住房·房租支出</h4>
                            </div>
                            <div class="transaction-amount expense-amount">-¥3,000</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                    </div>
                    
                    <!-- 5月20日 -->
                    <div class="date-group">
                        <div class="detail-date-header">
                            <div class="date-info">
                                <div>5月20日</div>
                                <div class="weekday">周二</div>
                            </div>
                            <div class="detail-date-summary">
                                <span>支出: ¥0</span>
                                <span>收入: ¥500</span>
                            </div>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="item-user-avatar">王</div>
                            <div class="transaction-icon" style="background: #f3f0ff; color: #5f3dc4;">💼</div>
                            <div class="transaction-info">
                                <h4>兼职·设计收入</h4>
                            </div>
                            <div class="transaction-amount income-amount">+¥500</div>
                            <button class="transaction-options">⋯</button>
                        </div>
                    </div>
                    
                    <div style="height: 80px;"></div> <!-- 底部空间，防止内容被底部导航遮挡 -->
                </div>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item" data-page="index.html">
                    <div class="nav-icon">🏠</div>
                    <div>首页</div>
                </div>
                <div class="nav-item" data-page="statistics.html">
                    <div class="nav-icon">📊</div>
                    <div>统计</div>
                </div>
                <div class="nav-item" id="quick-record-btn">
                    <div class="nav-icon" style="font-size: 24px;">➕</div>
                    <div>记账</div>
                </div>
                <div class="nav-item active" data-page="details.html">
                    <div class="nav-icon">📝</div>
                    <div>明细</div>
                </div>
                <div class="nav-item" data-page="user.html">
                    <div class="nav-icon">👤</div>
                    <div>我的</div>
                </div>
            </div>
        </div>
    
    <!-- 一句话记账弹窗 -->
    <div class="quick-record" id="quick-record-modal">
        <div class="quick-record-header">
            <div class="quick-record-title">一句话记账</div>
            <div class="close-btn" id="close-quick-record">✕</div>
        </div>
        <div class="voice-input">
            <input type="text" class="voice-input-field" id="voice-input-field" placeholder="例如：今天午餐花了30元">
            <div class="mic-btn" id="mic-btn">🎤</div>
        </div>
        <button class="btn btn-primary" id="submit-quick-record">识别并记账</button>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    <!-- 金额编辑弹窗 -->
    <div class="modal fade" id="amountEditModal" tabindex="-1" aria-labelledby="amountEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="amountEditModalLabel">💰 编辑金额</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="currentAmountDisplay" class="form-label text-muted">当前金额</label>
                        <input type="text" class="form-control" id="currentAmountDisplay" readonly style="background-color: #f8f9fa;">
                    </div>
                    <div class="mb-3">
                        <label for="newAmountInput" class="form-label">新金额 <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text bg-primary text-white">¥</span>
                            <input type="number" class="form-control" id="newAmountInput" placeholder="请输入新金额" step="0.01" min="0">
                        </div>
                        <div class="form-text">💡 请输入有效的数字金额</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmAmountEdit">✓ 确认修改</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 描述编辑弹窗 -->
    <div class="modal fade" id="descEditModal" tabindex="-1" aria-labelledby="descEditModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descEditModalLabel">📝 编辑描述</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="currentDescDisplay" class="form-label text-muted">当前描述</label>
                        <input type="text" class="form-control" id="currentDescDisplay" readonly style="background-color: #f8f9fa;">
                    </div>
                    <div class="mb-3">
                        <label for="newDescInput" class="form-label">新描述 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newDescInput" placeholder="请输入新描述" maxlength="50">
                        <div class="form-text">💡 描述不能为空，最多50个字符</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmDescEdit">✓ 确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 更新当前时间
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            // 移除对不存在元素的引用
            // document.getElementById('current-time').textContent = `${hours}:${minutes}`;
        }
        
        // 当前选中的年月
        let currentYear = new Date().getFullYear();
        let currentMonth = new Date().getMonth() + 1;
        
        // 更新当前月份
        function updateMonth() {
            document.getElementById('current-month').innerHTML = `${currentYear}年${currentMonth}月 <span class="month-arrow">▼</span>`;
            document.getElementById('year-display').textContent = currentYear;
            
            // 更新月份选择器中的活跃状态
            document.querySelectorAll('.month-item').forEach(item => {
                item.classList.remove('active');
                if (parseInt(item.getAttribute('data-month')) === currentMonth) {
                    item.classList.add('active');
                }
            });
        }
        
        // 月份选择器功能
        function initMonthPicker() {
            const monthSelector = document.getElementById('current-month');
            const monthPicker = document.getElementById('month-picker');
            const prevYearBtn = document.getElementById('prev-year');
            const nextYearBtn = document.getElementById('next-year');
            const monthItems = document.querySelectorAll('.month-item');
            
            // 点击月份显示选择器
            monthSelector.addEventListener('click', function() {
                const isVisible = monthPicker.style.display !== 'none';
                monthPicker.style.display = isVisible ? 'none' : 'block';
                monthSelector.classList.toggle('active', !isVisible);
            });
            
            // 年份切换
            prevYearBtn.addEventListener('click', function() {
                currentYear--;
                updateMonth();
            });
            
            nextYearBtn.addEventListener('click', function() {
                currentYear++;
                updateMonth();
            });
            
            // 月份选择
            monthItems.forEach(item => {
                item.addEventListener('click', function() {
                    currentMonth = parseInt(this.getAttribute('data-month'));
                    updateMonth();
                    monthPicker.style.display = 'none';
                    monthSelector.classList.remove('active');
                    
                    // 这里可以添加加载对应月份数据的逻辑
                    loadMonthData(currentYear, currentMonth);
                });
            });
            
            // 点击其他地方关闭选择器
            document.addEventListener('click', function(e) {
                if (!monthSelector.contains(e.target) && !monthPicker.contains(e.target)) {
                    monthPicker.style.display = 'none';
                    monthSelector.classList.remove('active');
                }
            });
        }
        
        // 加载指定月份的数据
        function loadMonthData(year, month) {
            console.log(`加载 ${year}年${month}月 的数据`);
            // 这里可以添加实际的数据加载逻辑
            // 例如：从服务器获取数据，更新明细列表等
        }
        
        // 初始化时间和月份
        updateTime();
        updateMonth();
        initMonthPicker();
        setInterval(updateTime, 60000);
        
        // 底部导航切换页面
        document.querySelectorAll('.nav-item[data-page]').forEach(item => {
            item.addEventListener('click', function() {
                window.location.href = this.getAttribute('data-page');
            });
        });
        
        // 筛选功能
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有按钮的active状态
                document.querySelectorAll('.filter-btn').forEach(b => {
                    b.classList.remove('active');
                });
                
                // 添加当前按钮的active状态
                this.classList.add('active');
                
                const filter = this.getAttribute('data-filter');
                filterTransactions(filter);
                
                // 更新分类筛选容器的显示状态
                if (filter === 'all') {
                    document.getElementById('category-filter-container').style.display = 'none';
                    // 隐藏二级分类容器
                    document.getElementById('subcategory-filter-container').style.display = 'none';
                } else {
                    document.getElementById('category-filter-container').style.display = 'block';
                    loadCategories(filter);
                    // 重置二级分类容器
                    document.getElementById('subcategory-filter-container').style.display = 'none';
                    document.getElementById('filter-subcategories').innerHTML = '';
                }
            });
        });
        
        // 高级筛选面板显示/隐藏
        const advancedFilterBtn = document.getElementById('advanced-filter-btn');
        const advancedFilterPanel = document.getElementById('advanced-filter-panel');
        
        advancedFilterBtn.addEventListener('click', function() {
            if (advancedFilterPanel.style.display === 'none') {
                advancedFilterPanel.style.display = 'block';
                // 初始化日期选择器为当前月份的第一天和最后一天
                const now = new Date();
                const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
                const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
                
                document.getElementById('date-from').valueAsDate = firstDay;
                document.getElementById('date-to').valueAsDate = lastDay;
                
                // 根据当前选中的筛选类型加载分类
                const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');
                if (activeFilter !== 'all') {
                    document.getElementById('category-filter-container').style.display = 'block';
                    loadCategories(activeFilter);
                } else {
                    document.getElementById('category-filter-container').style.display = 'none';
                }
            } else {
                advancedFilterPanel.style.display = 'none';
            }
        });
        
        // 支出分类数据
        const expenseCategories = [
            { name: '餐饮', icon: '🍔', subcategories: [
                { name: '三餐', icon: '🍚' },
                { name: '奶茶', icon: '🧋' },
                { name: '宵夜', icon: '🍜' },
                { name: '零食', icon: '🍪' }
            ]},
            { name: '交通', icon: '🚇', subcategories: [
                { name: '公交地铁', icon: '🚌' },
                { name: '打车', icon: '🚕' },
                { name: '加油', icon: '⛽' },
                { name: '停车费', icon: '🅿️' }
            ]},
            { name: '购物', icon: '🛒', subcategories: [
                { name: '衣服鞋包', icon: '👕' },
                { name: '化妆品', icon: '💄' },
                { name: '数码产品', icon: '📱' },
                { name: '日用品', icon: '🧴' }
            ]},
            { name: '住房', icon: '🏠', subcategories: [] },
            { name: '通讯', icon: '📱', subcategories: [] },
            { name: '医疗', icon: '💊', subcategories: [] },
            { name: '娱乐', icon: '🎮', subcategories: [] },
            { name: '教育', icon: '📚', subcategories: [] }
        ];
        
        // 收入分类数据
        const incomeCategories = [
            { name: '工资', icon: '💰', subcategories: [
                { name: '月薪', icon: '📅' },
                { name: '年终奖', icon: '🎁' },
                { name: '加班费', icon: '⏰' },
                { name: '绩效奖金', icon: '🏆' }
            ]},
            { name: '兼职', icon: '💼', subcategories: [
                { name: '家教', icon: '📝' },
                { name: '网约工', icon: '🚴' },
                { name: '自由职业', icon: '💻' },
                { name: '其他兼职', icon: '🔄' }
            ]},
            { name: '理财', icon: '📈', subcategories: [
                { name: '股票', icon: '📊' },
                { name: '基金', icon: '💹' },
                { name: '存款利息', icon: '🏦' },
                { name: '其他理财', icon: '💎' }
            ]},
            { name: '礼金', icon: '🧧', subcategories: [
                { name: '红包', icon: '🧧' },
                { name: '生日礼金', icon: '🎂' },
                { name: '节日礼金', icon: '🎊' },
                { name: '其他礼金', icon: '🎀' }
            ]}
        ];
        
        // 加载分类
        function loadCategories(type) {
            const categoriesContainer = document.getElementById('filter-categories');
            categoriesContainer.innerHTML = '';
            
            const categories = type === 'expense' ? expenseCategories : incomeCategories;
            
            categories.forEach(category => {
                const categoryItem = document.createElement('div');
                categoryItem.className = 'category-item';
                categoryItem.setAttribute('data-category', category.name);
                
                categoryItem.innerHTML = `
                    <div class="category-icon">${category.icon}</div>
                    <div class="category-name">${category.name}</div>
                `;
                
                categoryItem.addEventListener('click', function() {
                    // 移除其他分类的active状态
                    document.querySelectorAll('#filter-categories .category-item').forEach(item => {
                        item.classList.remove('active');
                    });
                    
                    // 添加当前分类的active状态
                    this.classList.add('active');
                    
                    // 加载二级分类
                    const categoryName = this.getAttribute('data-category');
                    loadSubcategories(type, categoryName);
                });
                
                categoriesContainer.appendChild(categoryItem);
            });
        }
        
        // 加载二级分类
        function loadSubcategories(type, categoryName) {
            const subcategoriesContainer = document.getElementById('filter-subcategories');
            const subcategoryFilterContainer = document.getElementById('subcategory-filter-container');
            
            subcategoriesContainer.innerHTML = '';
            
            const categories = type === 'expense' ? expenseCategories : incomeCategories;
            const category = categories.find(c => c.name === categoryName);
            
            if (category && category.subcategories && category.subcategories.length > 0) {
                subcategoryFilterContainer.style.display = 'block';
                
                category.subcategories.forEach(subcategory => {
                    const subcategoryItem = document.createElement('div');
                    subcategoryItem.className = 'subcategory-item';
                    subcategoryItem.setAttribute('data-subcategory', subcategory.name);
                    
                    subcategoryItem.innerHTML = `
                        <div class="subcategory-icon">${subcategory.icon}</div>
                        <div class="subcategory-name">${subcategory.name}</div>
                    `;
                    
                    subcategoryItem.addEventListener('click', function() {
                        // 移除其他二级分类的active状态
                        document.querySelectorAll('#filter-subcategories .subcategory-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        
                        // 添加当前二级分类的active状态
                        this.classList.add('active');
                    });
                    
                    subcategoriesContainer.appendChild(subcategoryItem);
                });
            } else {
                subcategoryFilterContainer.style.display = 'none';
            }
        }
        
        // 应用筛选按钮
        document.getElementById('apply-filter-btn').addEventListener('click', function() {
            const dateFrom = document.getElementById('date-from').value;
            const dateTo = document.getElementById('date-to').value;
            const transactionType = document.querySelector('.filter-btn.active').getAttribute('data-filter');
            
            let category = null;
            let subcategory = null;
            
            if (transactionType !== 'all') {
                const activeCategoryElement = document.querySelector('#filter-categories .category-item.active');
                if (activeCategoryElement) {
                    category = activeCategoryElement.getAttribute('data-category');
                    
                    const activeSubcategoryElement = document.querySelector('#filter-subcategories .subcategory-item.active');
                    if (activeSubcategoryElement) {
                        subcategory = activeSubcategoryElement.getAttribute('data-subcategory');
                    }
                }
            }
            
            // 应用筛选
            applyAdvancedFilter(dateFrom, dateTo, transactionType, category, subcategory);
            
            // 隐藏筛选面板
            advancedFilterPanel.style.display = 'none';
        });
        
        // 重置筛选按钮
        document.getElementById('reset-filter-btn').addEventListener('click', function() {
            // 重置日期选择器
            const now = new Date();
            const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
            const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
            
            document.getElementById('date-from').valueAsDate = firstDay;
            document.getElementById('date-to').valueAsDate = lastDay;
            
            // 重置分类选择
            document.querySelectorAll('#filter-categories .category-item').forEach(item => {
                item.classList.remove('active');
            });
            
            document.querySelectorAll('#filter-subcategories .subcategory-item').forEach(item => {
                item.classList.remove('active');
            });
            
            document.getElementById('subcategory-filter-container').style.display = 'none';
            
            // 重置交易类型筛选
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector('.filter-btn[data-filter="all"]').classList.add('active');
            
            // 显示所有交易
            filterTransactions('all');
            document.getElementById('category-filter-container').style.display = 'none';
        });
        
        // 筛选交易记录
        function filterTransactions(filter) {
            const transactions = document.querySelectorAll('.transaction-item');
            
            transactions.forEach(item => {
                const isExpense = item.querySelector('.expense-amount') !== null;
                const isIncome = item.querySelector('.income-amount') !== null;
                
                if (filter === 'all') {
                    item.style.display = 'flex';
                } else if (filter === 'expense' && isExpense) {
                    item.style.display = 'flex';
                } else if (filter === 'income' && isIncome) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 处理日期标题的显示/隐藏
            updateDateHeadersVisibility();
        }
        
        // 高级筛选功能
        function applyAdvancedFilter(dateFrom, dateTo, transactionType, category, subcategory) {
            const transactions = document.querySelectorAll('.transaction-item');
            
            // 转换日期字符串为Date对象
            const fromDate = dateFrom ? new Date(dateFrom) : null;
            const toDate = dateTo ? new Date(dateTo) : null;
            
            transactions.forEach(item => {
                const isExpense = item.querySelector('.expense-amount') !== null;
                const isIncome = item.querySelector('.income-amount') !== null;
                
                // 检查交易类型
                let matchesType = false;
                if (transactionType === 'all') {
                    matchesType = true;
                } else if (transactionType === 'expense' && isExpense) {
                    matchesType = true;
                } else if (transactionType === 'income' && isIncome) {
                    matchesType = true;
                }
                
                // 检查日期范围
                let matchesDate = true;
                if (fromDate || toDate) {
                    const dateText = item.querySelector('.transaction-info p').textContent;
                    const transactionDate = parseTransactionDate(dateText);
                    
                    if (fromDate && transactionDate < fromDate) {
                        matchesDate = false;
                    }
                    
                    if (toDate) {
                        // 将结束日期设置为当天的23:59:59
                        const endDate = new Date(toDate);
                        endDate.setHours(23, 59, 59, 999);
                        
                        if (transactionDate > endDate) {
                            matchesDate = false;
                        }
                    }
                }
                
                // 检查分类
                let matchesCategory = true;
                if (category) {
                    const transactionTitle = item.querySelector('.transaction-info h4').textContent;
                    const transactionIcon = item.querySelector('.transaction-icon').textContent;
                    
                    // 这里需要根据实际数据结构进行匹配，这里只是简单示例
                    // 实际应用中可能需要更复杂的逻辑或者在交易数据中添加分类标识
                    const categoryMatch = matchTransactionCategory(transactionTitle, transactionIcon, category, subcategory);
                    if (!categoryMatch) {
                        matchesCategory = false;
                    }
                }
                
                // 综合判断是否显示该交易
                if (matchesType && matchesDate && matchesCategory) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 处理日期标题的显示/隐藏
            updateDateHeadersVisibility();
        }
        
        // 解析交易日期文本
        function parseTransactionDate(dateText) {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            
            if (dateText.includes('今天')) {
                return now;
            } else if (dateText.includes('昨天')) {
                const yesterday = new Date();
                yesterday.setDate(now.getDate() - 1);
                return yesterday;
            } else {
                // 处理形如 "5月26日 18:20" 的日期
                const match = dateText.match(/(\d+)月(\d+)日/);
                if (match) {
                    const m = parseInt(match[1]) - 1; // 月份从0开始
                    const d = parseInt(match[2]);
                    return new Date(year, m, d);
                }
            }
            
            // 默认返回今天
            return now;
        }
        
        // 匹配交易分类
        function matchTransactionCategory(title, icon, category, subcategory) {
            // 这里需要根据实际数据结构进行匹配
            // 简单示例：根据标题或图标匹配分类
            
            // 支出分类匹配
            if (category === '餐饮' && (title.includes('餐') || title.includes('饭') || title.includes('奶茶') || title.includes('零食') || icon.includes('🍔'))) {
                if (!subcategory) return true;
                if (subcategory === '三餐' && (title.includes('餐') || title.includes('饭'))) return true;
                if (subcategory === '奶茶' && title.includes('奶茶')) return true;
                if (subcategory === '宵夜' && title.includes('宵夜')) return true;
                if (subcategory === '零食' && title.includes('零食')) return true;
            }
            
            if (category === '交通' && (title.includes('地铁') || title.includes('公交') || title.includes('打车') || title.includes('加油') || icon.includes('🚇'))) {
                if (!subcategory) return true;
                if (subcategory === '公交地铁' && (title.includes('地铁') || title.includes('公交'))) return true;
                if (subcategory === '打车' && title.includes('打车')) return true;
                if (subcategory === '加油' && title.includes('加油')) return true;
                if (subcategory === '停车费' && title.includes('停车')) return true;
            }
            
            if (category === '购物' && (title.includes('购物') || title.includes('超市') || icon.includes('🛒'))) {
                return !subcategory || true; // 简化处理，实际应用中需要更详细的匹配
            }
            
            if (category === '住房' && (title.includes('房租') || title.includes('水电') || icon.includes('🏠'))) {
                return true;
            }
            
            // 收入分类匹配
            if (category === '工资' && (title.includes('工资') || icon.includes('💰'))) {
                if (!subcategory) return true;
                if (subcategory === '月薪' && title.includes('工资')) return true;
                if (subcategory === '年终奖' && title.includes('年终奖')) return true;
                if (subcategory === '加班费' && title.includes('加班')) return true;
                if (subcategory === '绩效奖金' && title.includes('绩效')) return true;
            }
            
            if (category === '兼职' && (title.includes('兼职') || icon.includes('💼'))) {
                return !subcategory || true; // 简化处理
            }
            
            return false;
        }
        
        // 更新日期标题的显示/隐藏
        function updateDateHeadersVisibility() {
            const dateHeaders = document.querySelectorAll('.detail-date-header');
            dateHeaders.forEach(header => {
                const nextElement = header.nextElementSibling;
                let hasVisibleTransaction = false;
                
                // 检查该日期下是否有可见的交易记录
                let current = nextElement;
                while (current && !current.classList.contains('detail-date-header')) {
                    if (current.classList.contains('transaction-item') && 
                        current.style.display !== 'none') {
                        hasVisibleTransaction = true;
                        break;
                    }
                    current = current.nextElementSibling;
                }
                
                // 根据是否有可见交易记录来显示/隐藏日期标题
                header.style.display = hasVisibleTransaction ? 'block' : 'none';
            });
        }
        
        // 一句话记账功能
        const quickRecordBtn = document.getElementById('quick-record-btn');
        const quickRecordModal = document.getElementById('quick-record-modal');
        const closeQuickRecord = document.getElementById('close-quick-record');
        const overlay = document.getElementById('overlay');
        
        quickRecordBtn.addEventListener('click', function() {
            quickRecordModal.classList.add('active');
            overlay.classList.add('active');
        });
        
        closeQuickRecord.addEventListener('click', function() {
            quickRecordModal.classList.remove('active');
            overlay.classList.remove('active');
        });
        
        // 麦克风按钮点击事件
        const micBtn = document.getElementById('mic-btn');
        const voiceInputField = document.getElementById('voice-input-field');
        
        micBtn.addEventListener('click', function() {
            // 模拟语音识别
            showAlert('正在启动语音识别...');
            setTimeout(() => {
                voiceInputField.value = '今天午餐花了45元';
            }, 1500);
        });
        
        // 提交一句话记账
        const submitQuickRecord = document.getElementById('submit-quick-record');
        
        submitQuickRecord.addEventListener('click', function() {
            const inputText = voiceInputField.value.trim();
            if (!inputText) {
                showAlert('请输入或语音录入记账内容');
                return;
            }
            
            // 模拟识别处理
            showAlert('正在识别内容...');
            setTimeout(() => {
                // 关闭一句话记账弹窗
                quickRecordModal.classList.remove('active');
                overlay.classList.remove('active');
                
                // 跳转到记账页面
                window.location.href = 'index.html';
            }, 1500);
        });
        
        // 交易项选项按钮点击事件
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('transaction-options')) {
                e.preventDefault();
                e.stopPropagation();
                
                const transactionItem = e.target.closest('.transaction-item');
                const description = transactionItem.querySelector('.transaction-info h4').textContent;
                const amount = transactionItem.querySelector('.transaction-amount').textContent;
                const user = transactionItem.querySelector('.item-user-avatar').textContent;
                
                // 创建选项菜单
                const existingMenu = document.querySelector('.options-menu');
                if (existingMenu) {
                    existingMenu.remove();
                }
                
                const menu = document.createElement('div');
                menu.className = 'options-menu';
                menu.style.cssText = `
                    position: fixed;
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 1000;
                    min-width: 120px;
                    overflow: hidden;
                `;
                
                const rect = e.target.getBoundingClientRect();
                menu.style.top = (rect.bottom + 5) + 'px';
                menu.style.left = (rect.left - 80) + 'px';
                
                const menuItems = [
                    { text: '📝 编辑', action: 'edit' },
                    { text: '👁️ 查看详情', action: 'view' },
                    { text: '🗑️ 删除', action: 'delete', danger: true }
                ];
                
                menuItems.forEach(item => {
                    const menuItem = document.createElement('div');
                    menuItem.textContent = item.text;
                    menuItem.style.cssText = `
                        padding: 12px 16px;
                        cursor: pointer;
                        font-size: 14px;
                        color: ${item.danger ? '#dc3545' : '#495057'};
                        border-bottom: 1px solid #f0f0f0;
                        transition: background 0.2s;
                    `;
                    
                    menuItem.addEventListener('mouseenter', () => {
                        menuItem.style.background = item.danger ? '#fff5f5' : '#f8f9fa';
                    });
                    
                    menuItem.addEventListener('mouseleave', () => {
                        menuItem.style.background = 'white';
                    });
                    
                    menuItem.addEventListener('click', () => {
                        menu.remove();
                        
                        switch(item.action) {
                            case 'edit':
                                // 编辑功能
                                const editData = {
                                    user: user,
                                    description: description,
                                    amount: amount.replace(/[+\-¥,]/g, ''),
                                    type: amount.startsWith('+') ? 'income' : 'expense'
                                };
                                
                                // 模拟跳转到编辑页面
                                if (confirm(`编辑记录:\n用户: ${editData.user}\n描述: ${editData.description}\n金额: ${editData.amount}\n类型: ${editData.type === 'income' ? '收入' : '支出'}\n\n确定要编辑这条记录吗？`)) {
                                    showAlert('正在跳转到编辑页面...');
                                    // 实际项目中这里应该跳转到编辑页面
                                    // window.location.href = `edit.html?id=${recordId}`;
                                }
                                break;
                                
                            case 'view':
                                // 查看详情功能
                                const viewData = {
                                    user: user,
                                    description: description,
                                    amount: amount,
                                    date: transactionItem.closest('.date-group').querySelector('.detail-date-header .date-info > div:first-child').textContent,
                                    category: description.split('·')[0] || '未分类',
                                    subcategory: description.split('·')[1] || ''
                                };
                                
                                showAlert(`记录详情:\n\n日期: ${viewData.date}\n用户: ${viewData.user}\n分类: ${viewData.category}\n子分类: ${viewData.subcategory}\n描述: ${viewData.description}\n金额: ${viewData.amount}`);
                                break;
                                
                            case 'delete':
                                // 删除功能
                                if (confirm(`确定要删除这条记录吗？\n\n${description}\n${amount}`)) {
                                    // 添加删除动画
                                    transactionItem.style.transition = 'all 0.3s ease';
                                    transactionItem.style.opacity = '0';
                                    transactionItem.style.transform = 'translateX(100%)';
                                    
                                    setTimeout(() => {
                                        transactionItem.remove();
                                        updateDateGroupsVisibility();
                                        
                                        // 显示删除成功提示
                                        const toast = document.createElement('div');
                                        toast.textContent = '记录已删除';
                                        toast.style.cssText = `
                                            position: fixed;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%, -50%);
                                            background: #28a745;
                                            color: white;
                                            padding: 12px 24px;
                                            border-radius: 6px;
                                            z-index: 9999;
                                            font-size: 14px;
                                        `;
                                        document.body.appendChild(toast);
                                        
                                        setTimeout(() => {
                                            toast.remove();
                                        }, 2000);
                                    }, 300);
                                }
                                break;
                        }
                    });
                    
                    menu.appendChild(menuItem);
                });
                
                document.body.appendChild(menu);
                
                // 点击其他地方关闭菜单
                setTimeout(() => {
                    document.addEventListener('click', function closeMenu(e) {
                        if (!menu.contains(e.target)) {
                            menu.remove();
                            document.removeEventListener('click', closeMenu);
                        }
                    });
                }, 0);
            }
        });
        
        // 模糊搜索功能
        const searchInput = document.getElementById('search-input');
        let searchTimeout;
        
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                const searchTerm = this.value.toLowerCase().trim();
                const transactionItems = document.querySelectorAll('.transaction-item');
                
                transactionItems.forEach(item => {
                    const description = item.querySelector('.transaction-info h4').textContent.toLowerCase();
                    
                    if (searchTerm === '' || description.includes(searchTerm)) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 更新日期头部的显示/隐藏
                updateDateGroupsVisibility();
            }, 300);
        });
        
        // 更新日期分组的显示/隐藏
        function updateDateGroupsVisibility() {
            const dateGroups = document.querySelectorAll('.date-group');
            dateGroups.forEach(group => {
                const visibleItems = group.querySelectorAll('.transaction-item[style*="flex"], .transaction-item:not([style*="none"])');
                const hasVisibleItems = Array.from(visibleItems).some(item => 
                    !item.style.display || item.style.display === 'flex'
                );
                
                group.style.display = hasVisibleItems ? 'block' : 'none';
            });
        }
        
        // 用户筛选功能
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('user-filter-btn')) {
                // 移除所有按钮的active状态
                document.querySelectorAll('.user-filter-btn').forEach(btn => {
                    btn.classList.remove('active');
                    btn.style.background = '#f8f9fa';
                    btn.style.color = '#495057';
                    btn.style.borderColor = '#dee2e6';
                });
                
                // 添加当前按钮的active状态
                e.target.classList.add('active');
                e.target.style.background = '#667eea';
                e.target.style.color = 'white';
                e.target.style.borderColor = '#667eea';
                
                const selectedUser = e.target.getAttribute('data-user');
                const transactionItems = document.querySelectorAll('.transaction-item');
                
                transactionItems.forEach(item => {
                    const userAvatar = item.querySelector('.item-user-avatar');
                    const userName = userAvatar ? userAvatar.textContent.trim() : '';
                    
                    if (selectedUser === 'all' || userName === selectedUser) {
                        item.style.display = 'flex';
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 更新日期分组的显示/隐藏
                updateDateGroupsVisibility();
            }
        });
        
        // 应用筛选按钮功能增强
        const applyFilterBtn = document.getElementById('apply-filter-btn');
        applyFilterBtn.addEventListener('click', function() {
            const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
            const selectedUser = document.querySelector('.user-filter-btn.active').getAttribute('data-user');
            const transactionItems = document.querySelectorAll('.transaction-item');
            
            transactionItems.forEach(item => {
                const description = item.querySelector('.transaction-info h4').textContent.toLowerCase();
                const userAvatar = item.querySelector('.item-user-avatar');
                const userName = userAvatar ? userAvatar.textContent.trim() : '';
                
                const matchesSearch = searchTerm === '' || description.includes(searchTerm);
                const matchesUser = selectedUser === 'all' || userName === selectedUser;
                
                if (matchesSearch && matchesUser) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 更新日期分组的显示/隐藏
            updateDateGroupsVisibility();
            
            // 关闭筛选面板
            document.getElementById('advanced-filter-panel').style.display = 'none';
            
            // 显示应用成功提示
            const toast = document.createElement('div');
            toast.textContent = '筛选已应用';
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #28a745;
                color: white;
                padding: 12px 24px;
                border-radius: 6px;
                z-index: 9999;
                font-size: 14px;
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        });
        
        // 重置筛选按钮功能增强
        const resetFilterBtn = document.getElementById('reset-filter-btn');
        resetFilterBtn.addEventListener('click', function() {
            // 重置搜索框
            document.getElementById('search-input').value = '';
            
            // 重置用户筛选
            document.querySelectorAll('.user-filter-btn').forEach(btn => {
                btn.classList.remove('active');
                btn.style.background = '#f8f9fa';
                btn.style.color = '#495057';
                btn.style.borderColor = '#dee2e6';
            });
            
            const allUserBtn = document.querySelector('.user-filter-btn[data-user="all"]');
            allUserBtn.classList.add('active');
            allUserBtn.style.background = '#667eea';
            allUserBtn.style.color = 'white';
            allUserBtn.style.borderColor = '#667eea';
            
            // 显示所有交易项
            const transactionItems = document.querySelectorAll('.transaction-item');
            transactionItems.forEach(item => {
                item.style.display = 'flex';
            });
            
            // 更新日期分组的显示/隐藏
            updateDateGroupsVisibility();
            
            // 显示重置成功提示
            const toast = document.createElement('div');
            toast.textContent = '筛选已重置';
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #6c757d;
                color: white;
                padding: 12px 24px;
                border-radius: 6px;
                z-index: 9999;
                font-size: 14px;
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        });
        
        // 金额点击编辑功能
        let currentEditingAmountElement = null;
        const amountModal = new bootstrap.Modal(document.getElementById('amountEditModal'));
        
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('transaction-amount')) {
                const amountElement = e.target;
                currentEditingAmountElement = amountElement;
                const currentAmount = amountElement.textContent.replace(/[+\-¥,]/g, '');
                const isIncome = amountElement.textContent.startsWith('+');
                
                // 设置当前金额显示
                document.getElementById('currentAmountDisplay').value = amountElement.textContent;
                
                // 设置新金额输入框
                document.getElementById('newAmountInput').value = currentAmount;
                
                // 显示模态框
                amountModal.show();
            }
        });
        
        // 金额编辑确认按钮
        document.getElementById('confirmAmountEdit').addEventListener('click', function() {
            const newAmountInput = document.getElementById('newAmountInput');
            const newAmount = newAmountInput.value.trim();
            
            if (newAmount !== '' && !isNaN(newAmount) && parseFloat(newAmount) >= 0) {
                const isIncome = currentEditingAmountElement.textContent.startsWith('+');
                const formattedAmount = (isIncome ? '+' : '-') + '¥' + parseFloat(newAmount).toLocaleString();
                
                // 更新金额
                currentEditingAmountElement.textContent = formattedAmount;
                
                // 隐藏模态框
                amountModal.hide();
                
                // 显示修改成功提示
                const toast = document.createElement('div');
                toast.textContent = '金额修改成功';
                toast.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #28a745;
                    color: white;
                    padding: 12px 24px;
                    border-radius: 6px;
                    z-index: 9999;
                    font-size: 14px;
                `;
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.remove();
                }, 2000);
            } else {
                // 显示错误提示
                newAmountInput.classList.add('is-invalid');
                setTimeout(() => {
                    newAmountInput.classList.remove('is-invalid');
                }, 2000);
            }
        });
        
        // 金额输入框验证
        document.getElementById('newAmountInput').addEventListener('input', function() {
            const input = this;
            if (input.value.trim() === '' || isNaN(input.value) || parseFloat(input.value) < 0) {
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        // 描述点击编辑功能
        let currentEditingDescElement = null;
        const descModal = new bootstrap.Modal(document.getElementById('descEditModal'));
        
        document.addEventListener('click', function(e) {
            if (e.target.tagName === 'H4' && e.target.closest('.transaction-info')) {
                const descElement = e.target;
                currentEditingDescElement = descElement;
                const currentDesc = descElement.textContent;
                
                // 设置当前描述显示
                document.getElementById('currentDescDisplay').value = currentDesc;
                
                // 设置新描述输入框
                document.getElementById('newDescInput').value = currentDesc;
                
                // 显示模态框
                descModal.show();
            }
        });
        
        // 描述编辑确认按钮
        document.getElementById('confirmDescEdit').addEventListener('click', function() {
            const newDescInput = document.getElementById('newDescInput');
            const newDesc = newDescInput.value.trim();
            
            if (newDesc !== '') {
                // 更新描述
                currentEditingDescElement.textContent = newDesc;
                
                // 隐藏模态框
                descModal.hide();
                
                // 显示修改成功提示
                const toast = document.createElement('div');
                toast.textContent = '描述修改成功';
                toast.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #28a745;
                    color: white;
                    padding: 12px 24px;
                    border-radius: 6px;
                    z-index: 9999;
                    font-size: 14px;
                `;
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.remove();
                }, 2000);
            } else {
                // 显示错误提示
                newDescInput.classList.add('is-invalid');
                setTimeout(() => {
                    newDescInput.classList.remove('is-invalid');
                }, 2000);
            }
        });
        
        // 描述输入框验证
        document.getElementById('newDescInput').addEventListener('input', function() {
            const input = this;
            if (input.value.trim() === '') {
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });
        
        // Bootstrap 模态框函数
        function showAlert(message) {
            document.getElementById('alertModalBody').textContent = message;
            const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
            alertModal.show();
        }
        
        // 日历功能
        let currentCalendarYear = 2024;
        let currentCalendarMonth = 5; // 5月
        
        // 模拟数据 - 每日收支统计
        const dailyData = {
            '2024-05-28': { expense: 51, income: 0 },
            '2024-05-27': { expense: 0, income: 8500 },
            '2024-05-26': { expense: 189, income: 0 },
            '2024-05-25': { expense: 3000, income: 0 },
            '2024-05-24': { expense: 120, income: 0 },
            '2024-05-23': { expense: 0, income: 500 },
            '2024-05-22': { expense: 85, income: 0 },
            '2024-05-21': { expense: 200, income: 0 },
            '2024-05-20': { expense: 0, income: 1200 },
            '2024-05-19': { expense: 300, income: 0 },
            '2024-05-18': { expense: 150, income: 0 },
            '2024-05-17': { expense: 0, income: 800 },
            '2024-05-16': { expense: 250, income: 0 },
            '2024-05-15': { expense: 180, income: 0 },
            '2024-05-14': { expense: 0, income: 600 },
            '2024-05-13': { expense: 90, income: 0 },
            '2024-05-12': { expense: 320, income: 0 },
            '2024-05-11': { expense: 0, income: 400 },
            '2024-05-10': { expense: 160, income: 0 },
            '2024-05-09': { expense: 220, income: 0 },
            '2024-05-08': { expense: 0, income: 700 },
            '2024-05-07': { expense: 140, income: 0 },
            '2024-05-06': { expense: 280, income: 0 },
            '2024-05-05': { expense: 0, income: 900 },
            '2024-05-04': { expense: 110, income: 0 },
            '2024-05-03': { expense: 190, income: 0 },
            '2024-05-02': { expense: 0, income: 550 },
            '2024-05-01': { expense: 230, income: 0 }
        };
        
        // 打开日历
        document.getElementById('calendar-btn').addEventListener('click', function() {
            document.getElementById('calendar-view').style.display = 'flex';
            generateCalendar(currentCalendarYear, currentCalendarMonth);
        });
        
        // 关闭日历
        document.getElementById('calendar-close').addEventListener('click', function() {
            document.getElementById('calendar-view').style.display = 'none';
        });
        
        // 点击日历背景关闭
        document.getElementById('calendar-view').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
        
        // 日历导航
        document.getElementById('calendar-prev-month').addEventListener('click', function() {
            currentCalendarMonth--;
            if (currentCalendarMonth < 1) {
                currentCalendarMonth = 12;
                currentCalendarYear--;
            }
            generateCalendar(currentCalendarYear, currentCalendarMonth);
        });
        
        document.getElementById('calendar-next-month').addEventListener('click', function() {
            currentCalendarMonth++;
            if (currentCalendarMonth > 12) {
                currentCalendarMonth = 1;
                currentCalendarYear++;
            }
            generateCalendar(currentCalendarYear, currentCalendarMonth);
        });
        
        // 生成日历
        function generateCalendar(year, month) {
            const monthNames = ['', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            document.getElementById('calendar-month-year').textContent = `${year}年${monthNames[month]}`;
            
            const firstDay = new Date(year, month - 1, 1);
            const lastDay = new Date(year, month, 0);
            const daysInMonth = lastDay.getDate();
            const startingDayOfWeek = firstDay.getDay();
            
            const today = new Date();
            const isCurrentMonth = year === today.getFullYear() && month === today.getMonth() + 1;
            const todayDate = today.getDate();
            
            let calendarHTML = '';
            
            // 添加上个月的日期（灰色显示）
            const prevMonth = month === 1 ? 12 : month - 1;
            const prevYear = month === 1 ? year - 1 : year;
            const prevMonthLastDay = new Date(prevYear, prevMonth, 0).getDate();
            
            for (let i = startingDayOfWeek - 1; i >= 0; i--) {
                const day = prevMonthLastDay - i;
                calendarHTML += `<div class="calendar-day other-month">
                    <div class="calendar-day-number">${day}</div>
                </div>`;
            }
            
            // 添加当前月的日期
            for (let day = 1; day <= daysInMonth; day++) {
                const dateKey = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                const dayData = dailyData[dateKey];
                
                let dayClass = 'calendar-day';
                let dayContent = `<div class="calendar-day-number">${day}</div>`;
                
                // 检查是否是今天
                if (isCurrentMonth && day === todayDate) {
                    dayClass += ' today';
                }
                
                // 检查是否有数据
                if (dayData) {
                    dayClass += ' has-data';
                    let amountHTML = '';
                    if (dayData.expense > 0) {
                        amountHTML += `<div class="calendar-day-amount calendar-day-expense">-${dayData.expense}</div>`;
                    }
                    if (dayData.income > 0) {
                        amountHTML += `<div class="calendar-day-amount calendar-day-income">+${dayData.income}</div>`;
                    }
                    dayContent += amountHTML;
                }
                
                calendarHTML += `<div class="${dayClass}" data-date="${dateKey}">
                    ${dayContent}
                </div>`;
            }
            
            // 添加下个月的日期（灰色显示）
            const totalCells = Math.ceil((startingDayOfWeek + daysInMonth) / 7) * 7;
            const remainingCells = totalCells - (startingDayOfWeek + daysInMonth);
            
            for (let day = 1; day <= remainingCells; day++) {
                calendarHTML += `<div class="calendar-day other-month">
                    <div class="calendar-day-number">${day}</div>
                </div>`;
            }
            
            document.getElementById('calendar-days').innerHTML = calendarHTML;
            
            // 添加日期点击事件
            document.querySelectorAll('.calendar-day:not(.other-month)').forEach(dayElement => {
                dayElement.addEventListener('click', function() {
                    const dateKey = this.getAttribute('data-date');
                    if (dateKey) {
                        jumpToDate(dateKey);
                    }
                });
            });
        }
        
        // 跳转到指定日期的明细记录
        function jumpToDate(dateKey) {
            // 关闭日历
            document.getElementById('calendar-view').style.display = 'none';
            
            // 解析日期
            const [year, month, day] = dateKey.split('-');
            const targetDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
            const today = new Date();
            
            // 格式化日期显示
            let dateDisplay = '';
            const diffTime = today.getTime() - targetDate.getTime();
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            
            if (diffDays === 0) {
                dateDisplay = '今天';
            } else if (diffDays === 1) {
                dateDisplay = '昨天';
            } else {
                dateDisplay = `${parseInt(month)}月${parseInt(day)}日`;
            }
            
            // 查找对应的日期分组
            const dateGroups = document.querySelectorAll('.date-group');
            let targetGroup = null;
            
            dateGroups.forEach(group => {
                const dateHeader = group.querySelector('.detail-date-header .date-info div:first-child');
                if (dateHeader && dateHeader.textContent.trim() === dateDisplay) {
                    targetGroup = group;
                }
            });
            
            if (targetGroup) {
                // 滚动到目标日期
                targetGroup.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                
                // 高亮显示
                targetGroup.style.backgroundColor = '#f0f5ff';
                targetGroup.style.borderRadius = '8px';
                targetGroup.style.padding = '5px';
                
                // 3秒后移除高亮
                setTimeout(() => {
                    targetGroup.style.backgroundColor = '';
                    targetGroup.style.borderRadius = '';
                    targetGroup.style.padding = '';
                }, 3000);
                
                // 显示跳转成功提示
                const toast = document.createElement('div');
                toast.textContent = `已定位到${dateDisplay}的记录`;
                toast.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #667eea;
                    color: white;
                    padding: 12px 24px;
                    border-radius: 6px;
                    z-index: 9999;
                    font-size: 14px;
                `;
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.remove();
                }, 2000);
            } else {
                // 没有找到对应日期的记录
                const toast = document.createElement('div');
                toast.textContent = `${dateDisplay}暂无记录`;
                toast.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #6c757d;
                    color: white;
                    padding: 12px 24px;
                    border-radius: 6px;
                    z-index: 9999;
                    font-size: 14px;
                `;
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.remove();
                }, 2000);
            }
        }
    </script>

    <!-- 日历视图 -->
    <div class="calendar-view" id="calendar-view">
        <div class="calendar-container">
            <div class="calendar-header">
                <div class="calendar-title">收支日历</div>
                <button class="calendar-close" id="calendar-close">×</button>
            </div>
            
            <div class="calendar-nav">
                <button class="calendar-nav-btn" id="calendar-prev-month">‹</button>
                <div class="calendar-month-year" id="calendar-month-year">2024年5月</div>
                <button class="calendar-nav-btn" id="calendar-next-month">›</button>
            </div>
            
            <div class="calendar-grid">
                <div class="calendar-weekday">日</div>
                <div class="calendar-weekday">一</div>
                <div class="calendar-weekday">二</div>
                <div class="calendar-weekday">三</div>
                <div class="calendar-weekday">四</div>
                <div class="calendar-weekday">五</div>
                <div class="calendar-weekday">六</div>
                
                <!-- 日期格子将通过JavaScript动态生成 -->
                <div id="calendar-days" class="calendar-days"></div>
            </div>
            
            <div class="calendar-legend">
                <div class="calendar-legend-item">
                    <div class="calendar-legend-dot legend-expense"></div>
                    <span>有支出</span>
                </div>
                <div class="calendar-legend-item">
                    <div class="calendar-legend-dot legend-income"></div>
                    <span>有收入</span>
                </div>
                <div class="calendar-legend-item">
                    <div class="calendar-legend-dot legend-today"></div>
                    <span>今天</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 模态框 -->
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="alertModalBody">
                    <!-- 动态内容 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>